<template>
  <div class="feedback">
    <div class="title">
      <p>用户的宝贵意见是我们进步的最好方式</p>
      <h1>发送反馈，及时处理</h1>
    </div>
    <div class="msg">
      <div class="left">
        <p>请留下您宝贵的意见</p>
        <el-form ref="fbRef" :inline="true" :model="formMsg" :rules="rules">
          <el-form-item label="姓名" prop="sendName">
            <el-input v-model="formMsg.sendName" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formMsg.email" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="formMsg.content" rows="6" style="width: 500px" type="textarea"></el-input>
          </el-form-item>
          <el-form-item class="btnFeedback">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button type="warning" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="address">
          <i class="el-icon-location-outline"></i>
          <h2>公司地址</h2>
          <p>世界上最好的房屋租赁平台</p>
        </div>
        <div class="call">
          <i class="el-icon-message"></i>
          <h2>联系我们</h2>
          <p>2844125699@qq.com</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {checkUserInfoComplete} from "@/util/user-info-check";

export default {
  name: "Feedback",
  data() {
    return {
      formMsg: {
        id: "",
        sendName: "",
        email: "",
        content: "",
      },
      rules: {
        sendName: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm() {
      const loginUser = JSON.parse(localStorage.getItem("login-user"));
      if (!loginUser) {
        this.$message.warning("请先登录！")
        return
      }
      this.$refs.fbRef.validate(valid => {
        if (valid) {
          checkUserInfoComplete().then(res => {
            if (res === false){
              this.$message.warning('请先完善个人信息!')
              setTimeout(() => {
                this.$router.push('/index/admin/info')
              },2000)
            }else {
              axios({
                url: "http://localhost:8090/feedback/sendAdvice",
                method: 'post',
                data: this.formMsg
              }).then(res => {
                if (res.code === '200') {
                  this.$message.success('反馈成功!')
                }
                this.resetForm()
              })
            }
          });
        }
      })
    },
    resetForm() {
      this.formMsg = {
        renterName: "",
        email: "",
        content: "",
      };
    },
  }
}


</script>

<style scoped>

a {
  text-decoration: none;
  color: black;
}

.feedback{
  min-width: 1903px;
  min-height: 830px;
  background-color: #f8f9fe;
}

.title{
  height: 300px;
  padding: 0 350px;
  font-size: larger;
  background-image: url("@/assets/background7.jpg");
  background-position: center;
  background-size: cover;
  color: white;
 }

.title p{
  padding-top: 50px;
  padding-bottom: 20px;
}

.msg {
  display: flex;
  justify-content: space-between;
  padding: 60px 350px 0;
}

.msg .left {
  width: 750px;
  background-color: white;
  padding: 15px 20px;
}

.left p {
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 20px;
}

.left .btnFeedback {
  display: flex;
  justify-content: center;
}

.msg .right {
  width: 555px;
}

.right .address,
.right .call {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: white;
  line-height: 30px;
  color: #777;
  height: 200px;
}

.right i {
  font-size: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7586fb;
  background-color: #edeffe;
  border-radius: 50%;
  margin-bottom: 20px;
}

.right h2 {
  font-size: 20px;
  font-weight: 600;
  color: black;
}
</style>